<template>
  <div style="text-align: left;">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">录播课程</el-menu-item>
    </el-menu>
    <el-row v-for="(item,index) in aaa" :key="index"
            style="border-bottom: #cccccc solid 1px;padding-top: 10px;padding-bottom: 10px" type="flex" justify="start">
      <el-col :span="20" class="course_content">
        <div style="display: inline-block; float: left; margin: 5px;">
          <img :src="item.cover" class="avatar">
        </div>
        <p class="course_name"><span>{{ item.courseName }}</span></p>
        <p class="course_study"><span>上次学习：{{ item.coursePeroidName }}</span></p>
        <p class="course_time"><span>学习时间：{{ item.gmtCreate }}</span></p>
      </el-col>
      <el-col :span="4">
        <div class="bg-purple">
          <!--<router-link :to="{path:'/outline',query:{type:'0',all:courseinfo}}">-->
            <el-button type="info" plain @click="study(item.coursePeroidId,item.courseId)">进入学习</el-button>
          <!--</router-link>-->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    name: "myCourses",
    data() {
      return {
        aaa: [],
        activeIndex: '1',
        cover: '',
        userId:'',
        periodinfo:'',
        courseinfo:'',
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
     async study(id,cid){
        console.log(cid)
        let data = new Object();
        data.id =id;
      await  this.$axios2.post("showdata/eduChapterPeriod/findByPid",qs.stringify(data)).then(r=>{
             this.periodinfo = r.data;
        });
      await  this.$axios2.get("showdata/eduCourse/findByCid?cid="+cid).then(r=>{
            this.courseinfo = r.data;
        });
        console.log(this.courseinfo);
        this.$router.push({
          path:"/outline",
          query: {
            all:JSON.stringify(this.courseinfo),
            periodinfo:this.periodinfo,
          }
        });
      }
    },
    created(){
      let uid =sessionStorage.getItem("uid");
      this.$axios2.post("student/stu/user-course/findAll",qs.stringify({userId:uid})).then(r=>{
        this.aaa=r.data.records;
        console.log(this.aaa)
      })
    }
  }
</script>

<style scoped>
  .avatar {
    width: 180px;
    height: 100px;
    display: block;
    margin-left: 10px;
  }

  .course_content p {
    height: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 20px;
  }

  .course_name {
    top: 25px;
    color: #333;
  }
  .course_study {
    top: 40px;
    color: #D51423;
  }
  .course_time {
    bottom: 25px;
  }

  .el-row--flex {
    margin-bottom: 0;
  }
</style>
